<template>
  <div class="home">
    <div class="header">
      <img src="@/assets/images/Login/logo.jpg" />
      <p class="title">小米账号登录</p>
    </div>
    <div class="form">
      <van-form validate-first v-if="index === 1">
        <van-field v-model="phone" name="pattern" placeholder="+86  ᐳ   手机号码" />
        <van-field v-model="code" name="pattern" placeholder="短信验证码" type="number">
          <template #button>
            <van-button native-type="button" type="primary" v-show="isBtn">发送验证码</van-button>
          </template>
        </van-field>
        <div class="btn">
          <van-button block type="info" native-type="submit" color="#ff6700" @click="toHome">立即登录/注册</van-button>
          <van-button block native-type="submit" @click="handleAcc">用户名密码登录</van-button>
        </div>
        <div class="tip">
          <a
            href="https://static.account.xiaomi.com/html/faq/zh_CN/faqSMSerror.html"
            target="blank"
          >收不到验证码？</a>
        </div>
        <div class="other">
          <p>———————— 其他方式登录 ————————</p>
          <div class="icon">
            <a
              href="https://api.weibo.com/oauth2/authorize?response_type=code&client_id=2996826273&redirect_uri=https://sns.account.xiaomi.com/pass/sns/login/load&state=STATE_586328"
              target="blank"
            >
              <div class="iconfont icon-weibo"></div>
            </a>
            <a
              href="https://auth.alipay.com/login/express.htm?goto=https%3A%2F%2Fmemberexprod.alipay.com%3A443%2Fauthorize%2FuserAuthQuickLoginAction.htm%3Fe_i_i_d%3Dad417c464b42481deda0278348fc3c7b"
              target="blank"
            >
              <div class="iconfont icon-zhifubao"></div>
            </a>
            <a href target="blank">
              <div class="iconfont icon-weixin"></div>
            </a>
          </div>
        </div>
      </van-form>
      <van-form validate-first v-else>
        <van-field v-model="username" name="pattern" placeholder="邮箱/手机号/小米ID" />
        <van-field v-model="password" name="pattern" placeholder="密码" type="password" />
        <div class="btn">
          <van-button block type="info" native-type="submit" color="#ff6700" @click="toHome1">登录</van-button>
          <van-button block native-type="button" @click="handleCode">手机验证码登录/注册</van-button>
        </div>
        <div class="tip">
          <a href="javascript:void(0);">立即注册 | 忘记密码</a>
        </div>
        <div class="other">
          <p>———————— 其他方式登录 ————————</p>
          <div class="icon">
            <a
              href="https://api.weibo.com/oauth2/authorize?response_type=code&client_id=2996826273&redirect_uri=https://sns.account.xiaomi.com/pass/sns/login/load&state=STATE_586328"
              target="blank"
            >
              <div class="iconfont icon-weibo"></div>
            </a>
            <a
              href="https://auth.alipay.com/login/express.htm?goto=https%3A%2F%2Fmemberexprod.alipay.com%3A443%2Fauthorize%2FuserAuthQuickLoginAction.htm%3Fe_i_i_d%3Dad417c464b42481deda0278348fc3c7b"
              target="blank"
            >
              <div class="iconfont icon-zhifubao"></div>
            </a>
            <a href target="blank">
              <div class="iconfont icon-weixin"></div>
            </a>
          </div>
        </div>
      </van-form>
    </div>
    <div class="footer">
      <a href="javascript:void(0);">简体</a>
      |
      <a href="javascript:void(0);">繁体</a>
      |
      <a href="javascript:void(0);">English</a>
      |
      <a href="javascript:void(0);">常见问题</a>
      |
      <a href="javascript:void(0);">隐私界面</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      code: '',
      username: '',
      password: '',
      isSuccess: true,
      index: 1,
      isBtn: true
    }
  },
  methods: {
    handleAcc() {
      this.index = 2
      this.isBtn = false
    },
    handleCode() {
      this.index = 1
      this.isBtn = true
    },
    toHome() {
      if (this.phone === '' && this.code === '') {
        return this.$notify({ type: 'warning', message: '请输入正确内容' })
      }
      this.$router.push('/home')
    },
    toHome1() {
      if (this.username === '' && this.password === '') {
        return this.$notify({ type: 'warning', message: '请输入正确内容' })
      }
      this.$router.push('/home')
    }
  }
}
</script>
<style scoped>
.home {
  background: #fff;
  padding-top: 1rem;
}
.header {
  text-align: center;
}
.header img {
  width: 1.8rem;
  height: 1.8rem;
}
.header p {
  font-size: 0.65rem;
}
.btn .van-button {
  margin: 0.7rem;
  height: 1.6rem;
  width: 11.9rem;
  border-radius: 0.2rem;
  font-size: 0.6rem;
}
.tip {
  font-size: 0.55rem;
}
.tip a {
  color: #999;
  display: block;
  text-align: center;
}
.other {
  margin-top: 1rem;
  text-align: center;
}
.other p {
  font-size: 0.45rem;
  color: rgb(176, 176, 176);
}
.other .icon {
  display: flex;
  width: 100%;
  height: 2rem;
  justify-content: center;
  align-items: center;
}
.footer {
  font-size: 0.5rem;
  display: flex;
  justify-content: space-around;
  color: rgb(155, 155, 155);
  margin: 0 0.6rem;
  margin-top: 1.9rem;
}
.footer a {
  color: rgb(155, 155, 155);
}
.footer a:nth-child(1) {
  color: #000;
}
.footer1 {
  height: 10%;
}
</style>
